<template>
  <div class="crop-management">
    <!-- 顶部操作栏 -->
    <div class="action-bar">
      <el-button type="primary" @click="showAddDialog = true">
        <el-icon><Plus /></el-icon>
        添加作物
      </el-button>
      <el-button @click="exportData">
        <el-icon><Download /></el-icon>
        导出数据
      </el-button>
      <div class="search-box">
        <el-input
          v-model="searchKeyword"
          placeholder="搜索作物..."
          prefix-icon="Search"
          clearable
        />
      </div>
    </div>

    <!-- 作物列表 -->
    <el-card class="crop-list-card">
      <template #header>
        <div class="card-header">
          <el-icon><Plant /></el-icon>
          <span>作物管理</span>
        </div>
      </template>
      
      <el-table :data="filteredCrops" style="width: 100%" v-loading="loading">
        <el-table-column prop="name" label="作物名称" width="120">
          <template #default="{ row }">
            <div class="crop-name">
              <el-icon class="crop-icon" :style="{ color: row.color }">
                <Plant />
              </el-icon>
              {{ row.name }}
            </div>
          </template>
        </el-table-column>
        
        <el-table-column prop="area" label="种植面积" width="100">
          <template #default="{ row }">
            {{ row.area }}亩
          </template>
        </el-table-column>
        
        <el-table-column prop="plantDate" label="种植日期" width="120" />
        
        <el-table-column prop="growthStage" label="生长阶段" width="120">
          <template #default="{ row }">
            <el-tag :type="getGrowthStageType(row.growthStage)" size="small">
              {{ row.growthStage }}
            </el-tag>
          </template>
        </el-table-column>
        
        <el-table-column prop="health" label="健康状况" width="120">
          <template #default="{ row }">
            <el-progress 
              :percentage="row.health" 
              :color="getHealthColor(row.health)"
              :stroke-width="8"
            />
          </template>
        </el-table-column>
        
        <el-table-column prop="expectedYield" label="预期产量" width="100">
          <template #default="{ row }">
            {{ row.expectedYield }}吨
          </template>
        </el-table-column>
        
        <el-table-column prop="status" label="状态" width="100">
          <template #default="{ row }">
            <el-tag :type="row.status === 'active' ? 'success' : 'info'" size="small">
              {{ row.status === 'active' ? '种植中' : '已完成' }}
            </el-tag>
          </template>
        </el-table-column>
        
        <el-table-column label="操作" width="200" fixed="right">
          <template #default="{ row }">
            <el-button size="small" @click="viewDetails(row)">详情</el-button>
            <el-button size="small" type="primary" @click="editCrop(row)">编辑</el-button>
            <el-button size="small" type="danger" @click="deleteCrop(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 添加/编辑作物对话框 -->
    <el-dialog
      v-model="showAddDialog"
      :title="editingCrop ? '编辑作物' : '添加作物'"
      width="600px"
    >
      <el-form :model="cropForm" :rules="cropRules" ref="cropFormRef" label-width="100px">
        <el-form-item label="作物名称" prop="name">
          <el-input v-model="cropForm.name" placeholder="请输入作物名称" />
        </el-form-item>
        
        <el-form-item label="种植面积" prop="area">
          <el-input-number 
            v-model="cropForm.area" 
            :min="0.1" 
            :max="100" 
            :precision="1"
            placeholder="亩"
          />
        </el-form-item>
        
        <el-form-item label="种植日期" prop="plantDate">
          <el-date-picker
            v-model="cropForm.plantDate"
            type="date"
            placeholder="选择种植日期"
            style="width: 100%"
          />
        </el-form-item>
        
        <el-form-item label="生长周期" prop="growthCycle">
          <el-input-number 
            v-model="cropForm.growthCycle" 
            :min="30" 
            :max="365" 
            placeholder="天"
          />
        </el-form-item>
        
        <el-form-item label="预期产量" prop="expectedYield">
          <el-input-number 
            v-model="cropForm.expectedYield" 
            :min="0.1" 
            :max="1000" 
            :precision="1"
            placeholder="吨"
          />
        </el-form-item>
        
        <el-form-item label="备注" prop="notes">
          <el-input 
            v-model="cropForm.notes" 
            type="textarea" 
            :rows="3"
            placeholder="请输入备注信息"
          />
        </el-form-item>
      </el-form>
      
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="showAddDialog = false">取消</el-button>
          <el-button type="primary" @click="saveCrop">确定</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 作物详情对话框 -->
    <el-dialog v-model="showDetailsDialog" title="作物详情" width="800px">
      <div v-if="selectedCrop" class="crop-details">
        <div class="detail-section">
          <h3>基本信息</h3>
          <el-descriptions :column="2" border>
            <el-descriptions-item label="作物名称">{{ selectedCrop.name }}</el-descriptions-item>
            <el-descriptions-item label="种植面积">{{ selectedCrop.area }}亩</el-descriptions-item>
            <el-descriptions-item label="种植日期">{{ selectedCrop.plantDate }}</el-descriptions-item>
            <el-descriptions-item label="生长阶段">{{ selectedCrop.growthStage }}</el-descriptions-item>
            <el-descriptions-item label="健康状况">{{ selectedCrop.health }}%</el-descriptions-item>
            <el-descriptions-item label="预期产量">{{ selectedCrop.expectedYield }}吨</el-descriptions-item>
          </el-descriptions>
        </div>
        
        <div class="detail-section">
          <h3>生长进度</h3>
          <el-progress 
            :percentage="getGrowthProgress(selectedCrop)" 
            :color="getProgressColor"
            :stroke-width="20"
          />
          <div class="progress-info">
            <span>已生长 {{ getDaysSincePlanting(selectedCrop) }} 天</span>
            <span>预计还需 {{ getRemainingDays(selectedCrop) }} 天</span>
          </div>
        </div>
        
        <div class="detail-section">
          <h3>环境数据</h3>
          <div class="environment-grid">
            <div class="env-item">
              <div class="env-label">温度</div>
              <div class="env-value">25.6°C</div>
            </div>
            <div class="env-item">
              <div class="env-label">湿度</div>
              <div class="env-value">68%</div>
            </div>
            <div class="env-item">
              <div class="env-label">土壤湿度</div>
              <div class="env-value">45%</div>
            </div>
            <div class="env-item">
              <div class="env-label">光照</div>
              <div class="env-value">850 lux</div>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'CropManagement',
  data() {
    return {
      loading: false,
      searchKeyword: '',
      showAddDialog: false,
      showDetailsDialog: false,
      editingCrop: null,
      selectedCrop: null,
      cropForm: {
        name: '',
        area: 1,
        plantDate: '',
        growthCycle: 120,
        expectedYield: 1,
        notes: ''
      },
      cropRules: {
        name: [
          { required: true, message: '请输入作物名称', trigger: 'blur' }
        ],
        area: [
          { required: true, message: '请输入种植面积', trigger: 'blur' }
        ],
        plantDate: [
          { required: true, message: '请选择种植日期', trigger: 'change' }
        ]
      },
      crops: [
        {
          id: 1,
          name: '水稻',
          area: 15,
          plantDate: '2024-03-15',
          growthStage: '分蘖期',
          health: 95,
          expectedYield: 12.5,
          status: 'active',
          color: '#67C23A',
          growthCycle: 120
        },
        {
          id: 2,
          name: '玉米',
          area: 12,
          plantDate: '2024-04-01',
          growthStage: '抽雄期',
          health: 88,
          expectedYield: 18.2,
          status: 'active',
          color: '#E6A23C',
          growthCycle: 110
        },
        {
          id: 3,
          name: '蔬菜',
          area: 8,
          plantDate: '2024-03-20',
          growthStage: '成熟期',
          health: 92,
          expectedYield: 5.8,
          status: 'active',
          color: '#409EFF',
          growthCycle: 60
        },
        {
          id: 4,
          name: '小麦',
          area: 6,
          plantDate: '2024-02-15',
          growthStage: '收获期',
          health: 100,
          expectedYield: 4.2,
          status: 'completed',
          color: '#F56C6C',
          growthCycle: 180
        }
      ]
    }
  },
  computed: {
    filteredCrops() {
      if (!this.searchKeyword) return this.crops
      return this.crops.filter(crop => 
        crop.name.toLowerCase().includes(this.searchKeyword.toLowerCase())
      )
    },
    getProgressColor() {
      return [
        { color: '#f56c6c', percentage: 20 },
        { color: '#e6a23c', percentage: 40 },
        { color: '#5cb87a', percentage: 60 },
        { color: '#1989fa', percentage: 80 },
        { color: '#6f7ad3', percentage: 100 }
      ]
    }
  },
  methods: {
    getGrowthStageType(stage) {
      const types = {
        '播种期': 'info',
        '苗期': 'warning',
        '分蘖期': 'primary',
        '抽雄期': 'success',
        '成熟期': 'danger',
        '收获期': 'success'
      }
      return types[stage] || 'info'
    },
    
    getHealthColor(health) {
      if (health >= 90) return '#67C23A'
      if (health >= 70) return '#E6A23C'
      return '#F56C6C'
    },
    
    viewDetails(crop) {
      this.selectedCrop = crop
      this.showDetailsDialog = true
    },
    
    editCrop(crop) {
      this.editingCrop = crop
      this.cropForm = { ...crop }
      this.showAddDialog = true
    },
    
    deleteCrop(crop) {
      this.$confirm('确定要删除这个作物吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const index = this.crops.findIndex(c => c.id === crop.id)
        if (index > -1) {
          this.crops.splice(index, 1)
          this.$message.success('删除成功')
        }
      })
    },
    
    saveCrop() {
      this.$refs.cropFormRef.validate((valid) => {
        if (valid) {
          if (this.editingCrop) {
            // 编辑现有作物
            const index = this.crops.findIndex(c => c.id === this.editingCrop.id)
            if (index > -1) {
              this.crops[index] = { ...this.editingCrop, ...this.cropForm }
            }
            this.$message.success('编辑成功')
          } else {
            // 添加新作物
            const newCrop = {
              id: Date.now(),
              ...this.cropForm,
              growthStage: '播种期',
              health: 100,
              status: 'active',
              color: '#67C23A'
            }
            this.crops.push(newCrop)
            this.$message.success('添加成功')
          }
          this.showAddDialog = false
          this.resetForm()
        }
      })
    },
    
    resetForm() {
      this.cropForm = {
        name: '',
        area: 1,
        plantDate: '',
        growthCycle: 120,
        expectedYield: 1,
        notes: ''
      }
      this.editingCrop = null
    },
    
    exportData() {
      this.$message.success('数据导出功能开发中...')
    },
    
    getGrowthProgress(crop) {
      const daysSincePlanting = this.getDaysSincePlanting(crop)
      return Math.min((daysSincePlanting / crop.growthCycle) * 100, 100)
    },
    
    getDaysSincePlanting(crop) {
      const plantDate = new Date(crop.plantDate)
      const today = new Date()
      return Math.floor((today - plantDate) / (1000 * 60 * 60 * 24))
    },
    
    getRemainingDays(crop) {
      const daysSincePlanting = this.getDaysSincePlanting(crop)
      return Math.max(crop.growthCycle - daysSincePlanting, 0)
    }
  }
}
</script>

<style scoped>
.crop-management {
  display: flex;
  flex-direction: column;
  gap: 20px;
  height: 100%;
}

.action-bar {
  display: flex;
  gap: 16px;
  align-items: center;
}

.search-box {
  margin-left: auto;
  width: 300px;
}

.crop-list-card {
  flex: 1;
}

.card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}

.crop-name {
  display: flex;
  align-items: center;
  gap: 8px;
}

.crop-icon {
  font-size: 16px;
}

.crop-details {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.detail-section h3 {
  margin: 0 0 16px 0;
  color: #303133;
  font-size: 16px;
  font-weight: 600;
}

.progress-info {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-size: 14px;
  color: #606266;
}

.environment-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.env-item {
  text-align: center;
  padding: 16px;
  background: #f8f9fa;
  border-radius: 8px;
}

.env-label {
  font-size: 14px;
  color: #606266;
  margin-bottom: 8px;
}

.env-value {
  font-size: 18px;
  font-weight: bold;
  color: #303133;
}
</style> 